<template>
	<div class="header">
		<!-- 左侧Nav -->
		<Nav/>
		<!-- 输入框 -->
		<div class="search-wraper">
			<Search 
				:sName="searchName"
				:styles="searchStyles"
				:placeholder="hotSearch.text"
				:pops="pops.search"
				@search="searchText"
			/>
		</div>
		<!-- 右侧列表 -->
		<UserNav/>
		<!-- 浮窗组件 -->
		<div class="pops-box">
			<Pops :posi="{x: pops.stand.x, y: pops.stand.y}" :show="pops.stand.show"><Stand/></Pops>
			<Pops :posi="{x: pops.gameCenter.x, y: pops.gameCenter.y}" :show="pops.gameCenter.show"><GameCenter/></Pops>
			<!-- <Pops :posi="{x: pops.live.x, y: pops.live.y}" :show="pops.live.show"><Live/></Pops> -->
			<Pops :posi="{x: pops.cartoon.x, y: pops.cartoon.y}" :show="pops.cartoon.show"><Cartoon/></Pops>
			<Pops :posi="{x: pops.download.x, y: pops.download.y}" :show="pops.download.show"><Download/></Pops>
			
			<Pops :posi="{x: pops.unLogin.x, y: pops.unLogin.y}" :show="pops.unLogin.show"><UnLogin/></Pops>
			
			<!-- <Pops :posi="{x: pops.myself.x, y: pops.myself.y}" :show="pops.myself.show"><Reference/></Pops>
			<Pops :posi="{x: pops.member.x, y: pops.member.y}" :show="pops.member.show"><Reference/></Pops>
			<Pops :posi="{x: pops.news.x, y: pops.news.y}" :show="pops.news.show"><Reference/></Pops>
			<Pops :posi="{x: pops.dynamic.x, y: pops.dynamic.y}" :show="pops.dynamic.show"><Reference/></Pops>
			<Pops :posi="{x: pops.collect.x, y: pops.collect.y}" :show="pops.collect.show"><Reference/></Pops>
			<Pops :posi="{x: pops.history.x, y: pops.history.y}" :show="pops.history.show"><Reference/></Pops> -->
			
			<Pops :posi="{x: pops.reference.x, y: pops.reference.y}" :show="pops.reference.show"><Reference/></Pops>
		</div>
	</div>
</template>

<script>
import Nav from "./Nav"
import Search from "../Public/Search"
import UserNav from "./UserNav"

import Stand from "@/components/Pops/Stand"
import GameCenter from "@/components/Pops/GameCenter"
// import Live from "@/components/Pops/Live"
import Cartoon from "@/components/Pops/Cartoon"
import Download from "@/components/Pops/Download"

import UnLogin from "@/components/Pops/UnLogin"
import Reference from "@/components/Pops/Reference"
export default{
	name: 'Header',
	data(){
		return{
			// 输入框name
			searchName: 'headerSearch',
			// 输入框样式设置
			searchStyles:{
				box: {
					backgroundColor: '#f4f4f4'
				},
				search: {
					textIndent: '16px'
				},
				btn: {
					styles: {
						width: '47px',
						backgroundColor: '#E7E7E7',
						color: '#505050'
					},
					inner: {
						color: '#1890ff',
					}
				}
			}
		}
	},
	computed:{
		hotSearch(){
			return this.$store.state.search.hotSearch;
		},
		pops(){
			return this.$store.state.pops.pops;
		}
	},
	components:{
		Nav,
		Search,
		UserNav,
		Stand,
		GameCenter,
		// Live,
		Cartoon,
		Download,
		UnLogin,
		Reference
	},
	methods:{
		// 直接搜索就打开网页，有值则保存记录暂时不跳转
		searchText(text){
			let name = this.searchName;
			if(!text){
				this.$store.commit('search/pushSearch', {name, val: {...this.hotSearch}});
				window.open(this.hotSearch.url)
			}else{
				let id = new Date().getTime();
				let url = 'url:' + text;
				this.$store.commit('search/pushSearch', {name, val: {id, text, url}});
				console.log('暂时不支持文字搜索，没有获取id')
				// window.open(url)
			}
		},
		// 获取热搜信息
		getHotSearch(){
			let params = {
				where: 'search/getHotSearch', 
				url: '/x/web-interface/search/default'
			}
			this.$store.dispatch('global/request', params);
		},
		
	},
	activated(){
		this.getHotSearch();
	}
}
</script>

<style lang="less" scoped>
.header{
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	height: 56px;
	padding: 10px 24px;
	box-sizing: border-box;
	z-index: 100;
	.search-wraper{
		min-width: 400px;
		max-width: 500px;
		width: 100%;
		height: 36px;
		margin: 0 10px;
	}
	.pops-box{
		position: absolute;
		left: 0;
		top: 0;
	}
}
</style>
